<template>
  <div class="oldhome">
    <!-- 列表（新房/二手房/商铺）页面 -->
    <div class="oldhome-header">
      <!-- search头部搜索 -->
      <p>
        <i class="iconfont icon-zuo" @click="Return"></i>
      </p>
      <van-search v-model="input" @search="onSearch" placeholder="请输入楼盘名称" />
      <span @click="goMaphouse">地图找房</span>
    </div>
    <div class="oldhome-main">
      <div class="nav1">
        <!-- 筛选数据 -->
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" @change="handleArea" />
          <van-dropdown-item v-model="value2" :options="option2" @change="handlePrice" />
          <van-dropdown-item v-model="value3" :options="option3" @change="handleType" />
          <van-dropdown-item title="更多">
            <ul>
              <li>
                <b>排序</b>
                <van-row type="flex" justify="space-around">
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                </van-row>
              </li>
              <li>
                <b>特色</b>
                <van-row type="flex" justify="space-around">
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                </van-row>
              </li>
              <li>
                <b>状态</b>
                <van-row type="flex" justify="space-around">
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                </van-row>
              </li>
              <li>
                <b>装修</b>
                <van-row type="flex" justify="space-around">
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                </van-row>
              </li>
            </ul>
          </van-dropdown-item>
        </van-dropdown-menu>
        <div class="main">
          <dl v-for="(item,index) in list" :key="index" class="classifyType-item">
            <dt>
              <img :src="item.img" alt @click="godetails(item)" />
            </dt>
            <dd>
              <p class="p1">
                <span>{{item.state}}</span>
                <b>{{item.listingTitle}}</b>
              </p>
              <!-- <p>{{item.Speciallabel}}</p> -->
              <p class="p2">
                <span>{{item.area}}</span>|
                <span>建面:{{item.houseArea}}</span>
              </p>
              <p class="p3">
                <span>{{item.sellingprice}}元/㎡</span>
              </p>
              <p class="p4">
                <span class="span1">{{item.fitment}}</span>
                <span>{{item.stateType}}</span>
                <span>{{item.fitmentType}}</span>
              </p>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getoldhome, getarea, getPrice, getType } from "@/api/index.js";
export default {
  data() {
    return {
      input: "",
      list: [],
      value: "",
      value1: 0,
      value2: 0,
      value3: 0,
      option1: [
        { text: "区域", value: 0 },
        { text: "天津市", value: "天津市" },
        { text: "宿迁市", value: "宿迁市" },
        { text: "重庆市", value: "重庆市" },
        { text: "杭州市", value: "杭州市" }
      ],
      option2: [
        { text: "价格", value: 0 },
        { text: "不限", value: "不限" },
        { text: "5千以下", value: "1-5000" },
        { text: "5千~1万", value: "5000-10000" },
        { text: "1万~2万", value: "10000-20000" },
        { text: "2万以上", value: "20000-30000" }
      ],
      option3: [
        { text: "类型", value: 0 },
        { text: "中式", value: "中式" },
        { text: "欧式", value: "美式" },
        { text: "北欧", value: "北欧" }
      ],
      arealist: []
    };
  },
  created() {
    this.getoldhome();
  },
  methods: {
    //获取list数据
    getoldhome() {
      console.log(this.input);
      getoldhome({ params: { classifyType: 1, keyWord: this.input } }).then(
        res => {
          this.list = res.data.data;
          console.log(res.data);
        }
      );
    },
    onSearch() {
      console.log(2);
      this.getoldhome();
    },
    //筛选区域
    handleArea(value) {
      getarea({ detailAddress: value }).then(res => {
        this.list = res.data.data;
      });
    },
    //筛选价格
    handlePrice(value) {
      getPrice({ sellingprice: value }).then(res => {
        this.list = res.data.data;
        console.log(res);
      });
    },
    //筛选类型
    handleType(value) {
      getType({ fitmentType: value }).then(res => {
        this.list = res.data.data;
        console.log(res);
      });
    },
    goMaphouse() {
      this.$router.push("/maphouse");
    },
    //返回上一级
    Return() {
      this.$router.push("/main");
    },
    //  跳转详情页
    godetails(item) {
      this.$router.push({
        path: `/detail/${item.id}`,
        query: { area: item.area }
      });
    }
  }
};
</script>

<style scoped>
.oldhome {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.oldhome-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}
.oldhome-main {
  flex: 1;
  overflow-y: scroll;
}
.van-search__content--square {
  background: none;
  border: 1px solid #ccc;
  border-radius: 30px;
}

.main {
  width: 100%;
  height: auto;
  padding: 0 15px;
}
dl {
  display: flex;
  padding: 0 15px;
  margin-top: 20px;
}
dl > dt {
  margin-right: 15px;
}
dl > dt > img {
  width: 100px;
  height: 100px;
}
.p1 > span {
  background: #ccc;
  margin-right: 5px;
  margin-right: 5px;
}
.p2 {
  margin: 5px 0;
}
.p2 > span {
  border: none;
  margin-right: 5px;
}
.p3 {
  margin-bottom: 5px;
}
.p3 > span {
  border: none;
}
</style>